<template>
  <view class="detail" v-if="info">
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in info.pics" :key="item.pics_id">
        <view class="swiper-item" @click="preImg(index)">
          <image class="img" :src="item.pics_big_url" mode="widthFix"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 商品信息 -->
    <view class="message">
      <view class="price">
        ￥{{info.goods_price}}
      </view>
      <view class="info">
        <view class="left">
          {{info.goods_name}}
        </view>
        <view class="right">
          <uni-icons type="star" size="22"></uni-icons>
          收藏
        </view>
      </view>
      <view class="pass">
        快递：免运费--{{total}}
      </view>
    </view>
    <!-- 商品详情 
    文本替换  replace
    <img src=''====> <img style="display:block" src=''    
    -->
    <rich-text :nodes="info.goods_introduce"></rich-text>
    <div class="bottom">
      <!-- 
      options:配制左边的内容
      buttonGroup:配制右边内容
      @click:左边点击 返回值有一个index下标告诉我们点击项
      @buttonClick:右边点击， 返回值有一个index下标告诉我们点击项
      -->
      <uni-goods-nav :fill="true" :options="leftOptions" :buttonGroup="rightOptions" @click="leftClick"
        @buttonClick="rightClick"></uni-goods-nav>
    </div>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        info: '',
        leftOptions: [{
          icon: 'shop',
          text: '店铺'
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0,
        }],
        rightOptions: [{
            text: '加入购物车',
            backgroundColor: '#f00',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      };
    },
    computed: {
      ...mapGetters('cart', ['total'])
    },
    /*
    侦听器：某个值的change事件
    用法：
       watch:{
         total:{
           handler(newVal,oldVal){
             
           },
           deep:是否深度侦听,
           immediate:是否立即执行handler方法
         }
       }
    */
    watch: {
      total: {
        handler(newVal) {
          this.leftOptions[1].info = newVal
        },
        immediate: true
      }
    },
    onLoad({
      goods_id
    }) {
      this.getData(goods_id)
    },
    methods: {
      async getData(goods_id) {
        uni.showLoading({
          title: "加载中...",
          mask: true
        })
        const res = await uni.$http.get('/goods/detail?goods_id=' + goods_id)
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, "<img style='display:block' ")
        res.message.goods_introduce = res.message.goods_introduce.replace(/.webp/g, ".jpg")
        this.info = res.message
        console.log('商品详情', res);
        uni.hideLoading()
      },
      // 预览图片
      preImg(index) {
        // [{url:'xxx.jpg'},...]===>['xxx.jpg']
        // map===>你return 什么，数组返回值那一项就是什么
        const urlsArr = this.info.pics.map(item => {
          return item.pics_big_url
        })
        // console.log(urlsArr);
        uni.previewImage({
          current: index,
          urls: urlsArr
        })
      },
      leftClick(res) {
        console.log(res);
        if (res.index === 1) {
          uni.switchTab({
            url: "/pages/cart/cart"
          })
        }
      },
      rightClick(res) {
        if (res.index === 0) {
          // 添加到购物车
          // 添加数量与状态，但不希望修改源数据info
          this.$store.commit('cart/addToCart', {
            ...this.info,
            goods_count: 1,
            goods_status: true
          })
          console.log(this.$store.state.cart.cart);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail {
    padding-bottom: 60rpx;

    .swiper {
      height: 750rpx;
    }

    .img {
      width: 100%;
      ;
    }
  }

  .message {
    padding: 0 20rpx;

    .price {
      font-size: 20px;
      color: #c00000;
      padding: 40rpx 0;
    }

    .info {
      font-size: 14px;
      display: flex;

      .left {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        -webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
        word-wrap: break-word; //允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句
      }

      .right {
        width: 160rpx;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #eeece9;
      }
    }

    .pass {
      font-size: 12px;
      color: #878787;
      padding: 40rpx 0;
    }
  }

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
</style>